import React, { Component } from 'react';
import { Divider, Tabs, Radio, Spin, Empty, Row, Col, Select } from 'antd';
import _ from 'lodash';
import moment from 'moment';

const { Option } = Select;
const { TabPane } = Tabs;
// @connect(state => ({
//     targetVersionIds: state.VersionComparison.targetVersionIds, // 目标版本id
// }))
class TargetVersion extends Component {
  state = {
    tabKey: 'newest',
  };

  handleTabChange = key => {
    this.setState({
      tabKey: key,
    });
    const { dispatch, versionItem } = this.props;
    const targetItems = _.filter(versionItem, v => v.versionType === key)[0];
    dispatch({
      type: 'VersionComparison/setTarget',
      payload: { data: targetItems },
    });
  };

  // 获取目标选中的版本id
  selectTargetVersionVal = (versionId, stageName) => {
    const { dispatch, targetVersionIds } = this.props;
    const cloneIds = _.cloneDeep(targetVersionIds);
    _.each(cloneIds[0].stageIds, item => {
      const x = item;
      if (item.stageName === stageName) {
        x.versionId = versionId;
      }
    });
    dispatch({
      type: 'VersionComparison/editSelect',
      payload: { item: cloneIds, key: 'targetVersionIds' },
    });
  };

  buildPlanVersionName = versionInfo => {
    if (versionInfo.versionTypeCode === 'dynamic') {
      if (
        versionInfo.versionStateCode === 'sys_generation' ||
        versionInfo.versionStateCode === 'success_approved'
      ) {
        return `${moment(versionInfo.versionAscriptionDate).format('YYYYMM')}月动态版${
          versionInfo.versionNum
        }-${moment(versionInfo.updateTime).format('YYYYMMDD')}`;
      }

      return `${moment(versionInfo.versionAscriptionDate).format('YYYYMM')}月动态版${
        versionInfo.versionNum
      }`;
    }
    if (
      versionInfo.versionTypeCode === 'investment' ||
      versionInfo.versionTypeCode === 'strategy' ||
      versionInfo.versionTypeCode === 'pricing'
    ) {
      if (
        versionInfo.versionStateCode === 'sys_generation' ||
        versionInfo.versionStateCode === 'success_approved'
      ) {
        return `${versionInfo.versionType}${versionInfo.versionNum}-${moment(
          versionInfo.updateTime,
        ).format('YYYYMMDD')} ${versionInfo.isAssessmentVersion * 1 === 1 ? '(考核版)' : ''}`;
      }
      return `${versionInfo.versionType}${versionInfo.versionNum} ${
        versionInfo.isAssessmentVersion * 1 === 1 ? '(考核版)' : ''
      }`;
    }
    return '';
  };

  render() {
    const { versionItem, loading } = this.props;
    const { tabKey } = this.state;
    return (
      <>
        <div className="card-title">目标版本</div>
        <Divider />
        <div className="card-sub_title">
          <div className="sub_title">
            <i></i>
            <span>目标版本类型</span>
          </div>
        </div>
        <Tabs defaultActiveKey="1" size="small" onChange={this.handleTabChange}>
          {versionItem.map(element => (
            <TabPane
              tab={<Radio checked={element.versionType === tabKey}>{element.versionName}</Radio>}
              key={element.versionType}
            >
              <div className="tab-select-box">
                <div className="tab-select-text">{element.versionName}</div>
                <div className="tab-select-content">
                  {element.data.length > 0 ? (
                    <Row gutter={[0, 20]}>
                      {element.data.map(e => (
                        <Col key={e.stageId}>
                          <Row type="flex" justify="space-between" align="middle">
                            <Col span={3}>{e.stageName}</Col>
                            <Col span={21}>
                              <Select
                                defaultValue={e.itemInfo[0].versionId}
                                style={{ width: '100%' }}
                                disabled={element.versionType === 'newest'}
                                onSelect={id => this.selectTargetVersionVal(id, e.stageName)}
                              >
                                {e.itemInfo.map(v => (
                                  <Option value={v.versionId} key={v.versionId}>
                                    {this.buildPlanVersionName(v)}
                                  </Option>
                                ))}
                              </Select>
                            </Col>
                          </Row>
                        </Col>
                      ))}
                    </Row>
                  ) : (
                    <div className="loading">
                      {loading ? (
                        <Spin className="loading" tip="数据请求中..." />
                      ) : (
                        <Empty className="loading" image={Empty.PRESENTED_IMAGE_SIMPLE} />
                      )}
                    </div>
                  )}
                </div>
              </div>
            </TabPane>
          ))}
        </Tabs>
      </>
    );
  }
}

export default TargetVersion;
